<template>
  <div class="back-top"
  @click="backTop"
  v-if="showBtn">
      <!-- 外层包裹a标签 href='#' 即可在点击后刷新页面返回顶部 -->
      <!-- <a href="#"> -->
          <img src="~assets/img/common/top.png" alt="">
      <!-- </a> -->
      
  </div>
</template>

<script>
export default {
    name: 'BackTop',
    data() {
        return {
            showBtn: false,
        }
    },
    mounted() {
        window.addEventListener("scroll", this.showbtn, true);
    },
    methods: {
        // 回到顶部
      showbtn() {
        let that = this;
        //获取滚动距离
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        that.scrollTop = scrollTop;
        //当滚动距离大于900 出现返回箭头
        if (scrollTop > 900) {
            this.showBtn = true;
        } else {
            this.showBtn = false;
        }
      },
      backTop() {
        var timer = setInterval(function () {
          let osTop =
              document.documentElement.scrollTop || document.body.scrollTop;
          let ispeed = Math.floor(-osTop / 5);
          document.documentElement.scrollTop = document.body.scrollTop =
              osTop + ispeed;
          this.isTop = true;
          if (osTop === 0) {
              clearInterval(timer);
          }
        }, 15);
      },
    }
}
</script>

<style scoped>
    .back-top {
        position: fixed;
        right: 10px;
        bottom: 55px;
    }
    .back-top img {
        height: 43px;
        width: 43px;
    }
</style>